<template>
    <div class="input-container">
        <div class="wrapper">
            <div class="frame">
                <input type="text" required>
                <label>{{ title }}</label> 
                <div class="underline"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
defineOptions({
  name:'sr-input'
})
import { withDefaults ,ref} from 'vue';
withDefaults(defineProps<{
    backgroundColor1?:string,
    backgroundColor2?:string,
    backgroundColor3?:string,
    backgroundColor4?:string,
    wpWidth:string,
    wpBackground?:string,
    wpBoxShadow?:string,
    wpBordeRadius?:string,
    frameBottom?:string,
    frameHeight:string,
    inputBorderBottomColor?:string,
    labelValidColor?:string,
    labelColor:string,
    labelbottom?:string,
    udlineColor?:string
}>(), {
    backgroundColor1:'#ff00cc',
    backgroundColor2:'#ffcc00',
    backgroundColor3:'#00ffcc',
    backgroundColor4:'#ff0066',
    wpBackground:'#fff',
    wpBoxShadow:'0px 0px 10px rgba(0, 0, 0, 0.1)',
    wpBordeRadius:'10px',
    frameBottom:'-8px',
    inputBorderBottomColor:'#c0c0c0',
    labelValidColor:'#ff00cc',
    labelbottom:'10px',
    udlineColor:'#ff00cc'
})
let title = ref('账号');
</script>

<style scoped lang="scss">
*{
    box-sizing: border-box;
}
.input-container {    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg,v-bind("backgroundColor1") , v-bind("backgroundColor2"), v-bind("backgroundColor3"), v-bind("backgroundColor4"));
    .wrapper {  
        width: v-bind("wpWidth");
        background-color: v-bind("wpBackground");
        padding: 2.5rem;
        box-shadow: v-bind("wpBoxShadow");
        border-radius: v-bind("wpBordeRadius");
        .frame{
            position: relative;
            width: 100%;
            bottom: v-bind("frameBottom");
            height: v-bind("frameHeight");
            input{
                outline: none;
                width: 100%;
                height: 100%;
                border: none;
                font-size: 1rem;
                border-bottom: 2px solid v-bind("inputBorderBottomColor");
            }
            //输入框获得焦点时
            input:focus ~ label,
            //输入框失去焦点时
            input:valid ~ label{
                transform: translateY(-1.5rem);
                font-size: 0.9rem;
                color: v-bind("labelValidColor");
            }
            label{
                position: absolute;
                bottom: v-bind("labelbottom");
                left: 0;
                color: v-bind("labelColor");
                pointer-events: none;  //可以使点击label穿透到输入框
                transition: all 0.5s ease;
            }
            .underline{
                position: absolute;
                bottom: 0px;
                height: 2px;
                width: 100%;
                background-color: v-bind("udlineColor");
                transform: scaleX(0);
                transition: all 0.5s ease;
            }
            input:focus ~ .underline,
            input:valid ~ .underline{
                transform: scaleX(1);
            }
                
        }  
    }
}
</style>